<template>
  <div class="itemLine">
    <div class="index-num">Line{{index}}</div>
    <div class="options">
      <el-radio-group v-model="value.choice">
        <el-radio :label="1">随机</el-radio>
        <el-radio :label="2" class="radio2">自定义颜色</el-radio>
        <el-color-picker 
          v-if="value && value.choice === 2"
          v-model="value.color" />
      </el-radio-group>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    index: Number,
    value: {
      type: Object,
      default: () => {
        return {
          choice: 1,
          color: ''
        }
      }
    }
  },
  watch: {
    value: {
      handler() {
        this.$emit('input', this.value)
      },
      deep: true,
    },
  }
}

</script>
<style lang='scss' scoped>
.itemLine {
  width: 200px;
  height: auto;
  transition: all 0.3s linear;
  padding: 6px;
  display: flex;
  align-items: flex-start;
  border: 1px solid rgb(179, 176, 176);
  .index-num {
    padding: 0 10px;
  }
  .options {
    width: 100%;
    height: auto;
    transition: all 0.3s linear;
    flex: 1;
    ::v-deep {
      .el-radio {
        margin-top: 10px;
      }
      .el-color-picker {
        margin-top: 8px;
      }
    }
  }
}
</style>